<template>
  <div class="finance-report">
    <el-card class="header-card">
      <template #header>
        <div class="card-header">
          <span>财务报表</span>
        </div>
      </template>
      <div class="content">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="收入报表" name="incomeReport">
            <div class="income-report-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>收入统计报表</span>
                    <div class="header-actions">
                      <el-date-picker
                        v-model="reportDateRange"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="YYYY-MM-DD"
                        @change="loadIncomeReport"
                      />
                      <el-button @click="exportReport">导出报表</el-button>
                    </div>
                  </div>
                </template>
                
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-card class="stat-card">
                      <div class="stat-item">
                        <div class="stat-value">¥{{ incomeStats.total }}</div>
                        <div class="stat-label">总收入</div>
                      </div>
                    </el-card>
                  </el-col>
                  <el-col :span="6">
                    <el-card class="stat-card">
                      <div class="stat-item">
                        <div class="stat-value">¥{{ incomeStats.monthlyAvg }}</div>
                        <div class="stat-label">月均收入</div>
                      </div>
                    </el-card>
                  </el-col>
                  <el-col :span="6">
                    <el-card class="stat-card">
                      <div class="stat-item">
                        <div class="stat-value">{{ incomeStats.growthRate }}%</div>
                        <div class="stat-label">增长率</div>
                      </div>
                    </el-card>
                  </el-col>
                  <el-col :span="6">
                    <el-card class="stat-card">
                      <div class="stat-item">
                        <div class="stat-value">{{ incomeStats.tenantCount }}</div>
                        <div class="stat-label">付费租户</div>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
                
                <div ref="incomeChartRef" style="width: 100%; height: 400px; margin-top: 20px;"></div>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="成本分析" name="costAnalysis">
            <div class="cost-analysis-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>成本结构分析</span>
                    <div class="header-actions">
                      <el-date-picker
                        v-model="costDateRange"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="YYYY-MM-DD"
                        @change="loadCostAnalysis"
                      />
                      <el-button @click="exportCostAnalysis">导出分析</el-button>
                    </div>
                  </div>
                </template>
                
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-card class="stat-card">
                      <div class="stat-item">
                        <div class="stat-value">¥{{ costStats.total }}</div>
                        <div class="stat-label">总成本</div>
                      </div>
                    </el-card>
                  </el-col>
                  <el-col :span="8">
                    <el-card class="stat-card">
                      <div class="stat-item">
                        <div class="stat-value">¥{{ costStats.monthlyAvg }}</div>
                        <div class="stat-label">月均成本</div>
                      </div>
                    </el-card>
                  </el-col>
                  <el-col :span="8">
                    <el-card class="stat-card">
                      <div class="stat-item">
                        <div class="stat-value">{{ costStats.profitMargin }}%</div>
                        <div class="stat-label">利润率</div>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
                
                <div ref="costChartRef" style="width: 100%; height: 400px; margin-top: 20px;"></div>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="利润分析" name="profitAnalysis">
            <div class="profit-analysis-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>利润趋势分析</span>
                    <div class="header-actions">
                      <el-date-picker
                        v-model="profitDateRange"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="YYYY-MM-DD"
                        @change="loadProfitAnalysis"
                      />
                      <el-button @click="exportProfitAnalysis">导出分析</el-button>
                    </div>
                  </div>
                </template>
                
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-card class="stat-card">
                      <div class="stat-item">
                        <div class="stat-value">¥{{ profitStats.total }}</div>
                        <div class="stat-label">总利润</div>
                      </div>
                    </el-card>
                  </el-col>
                  <el-col :span="8">
                    <el-card class="stat-card">
                      <div class="stat-item">
                        <div class="stat-value">¥{{ profitStats.monthlyAvg }}</div>
                        <div class="stat-label">月均利润</div>
                      </div>
                    </el-card>
                  </el-col>
                  <el-col :span="8">
                    <el-card class="stat-card">
                      <div class="stat-item">
                        <div class="stat-value">{{ profitStats.growthRate }}%</div>
                        <div class="stat-label">利润增长率</div>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
                
                <div ref="profitChartRef" style="width: 100%; height: 400px; margin-top: 20px;"></div>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="税务报表" name="taxReport">
            <div class="tax-report-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>税务申报报表</span>
                    <div class="header-actions">
                      <el-select v-model="taxYear" placeholder="选择年份" @change="loadTaxReport">
                        <el-option
                          v-for="year in taxYears"
                          :key="year"
                          :label="year"
                          :value="year"
                        />
                      </el-select>
                      <el-button @click="exportTaxReport">导出报表</el-button>
                    </div>
                  </div>
                </template>
                
                <el-table :data="taxReports" style="width: 100%">
                  <el-table-column prop="month" label="月份" width="100" />
                  <el-table-column prop="income" label="收入" width="150" />
                  <el-table-column prop="cost" label="成本" width="150" />
                  <el-table-column prop="profit" label="利润" width="150" />
                  <el-table-column prop="taxRate" label="税率(%)" width="100" />
                  <el-table-column prop="taxAmount" label="应缴税额" width="150" />
                  <el-table-column prop="status" label="申报状态" width="120">
                    <template #default="scope">
                      <el-tag :type="getTaxStatusType(scope.row.status)">
                        {{ scope.row.status }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="150">
                    <template #default="scope">
                      <el-button size="small" @click="viewTaxDetails(scope.row)">查看详情</el-button>
                      <el-button 
                        v-if="scope.row.status !== '已申报'"
                        size="small" 
                        type="primary" 
                        @click="fileTaxReport(scope.row)"
                      >
                        申报
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'

// 响应式数据
const activeTab = ref('incomeReport')
const reportDateRange = ref([])
const costDateRange = ref([])
const profitDateRange = ref([])
const taxYear = ref(new Date().getFullYear())
const taxYears = ref([2021, 2022, 2023, 2024, 2025])

// 图表引用
const incomeChartRef = ref<HTMLElement | null>(null)
const costChartRef = ref<HTMLElement | null>(null)
const profitChartRef = ref<HTMLElement | null>(null)

// 收入统计数据
const incomeStats = ref({
  total: '1,256,800.00',
  monthlyAvg: '104,733.33',
  growthRate: '12.5',
  tenantCount: 142
})

// 成本统计数据
const costStats = ref({
  total: '856,200.00',
  monthlyAvg: '71,350.00',
  profitMargin: '31.8'
})

// 利润统计数据
const profitStats = ref({
  total: '400,600.00',
  monthlyAvg: '33,383.33',
  growthRate: '18.2'
})

// 税务报表数据
const taxReports = ref([
  {
    month: '2023-05',
    income: '125,680.00',
    cost: '85,620.00',
    profit: '40,060.00',
    taxRate: '25',
    taxAmount: '10,015.00',
    status: '待申报'
  },
  {
    month: '2023-04',
    income: '118,450.00',
    cost: '80,120.00',
    profit: '38,330.00',
    taxRate: '25',
    taxAmount: '9,582.50',
    status: '已申报'
  }
])

// 方法
const loadIncomeReport = () => {
  ElMessage.info('加载收入报表数据')
  // 初始化收入图表
  initIncomeChart()
}

const exportReport = () => {
  ElMessage.success('收入报表导出成功')
}

const loadCostAnalysis = () => {
  ElMessage.info('加载成本分析数据')
  // 初始化成本图表
  initCostChart()
}

const exportCostAnalysis = () => {
  ElMessage.success('成本分析导出成功')
}

const loadProfitAnalysis = () => {
  ElMessage.info('加载利润分析数据')
  // 初始化利润图表
  initProfitChart()
}

const exportProfitAnalysis = () => {
  ElMessage.success('利润分析导出成功')
}

const loadTaxReport = () => {
  ElMessage.info(`加载${taxYear.value}年税务报表`)
}

const exportTaxReport = () => {
  ElMessage.success('税务报表导出成功')
}

const viewTaxDetails = (row: any) => {
  ElMessage.info(`查看${row.month}税务详情`)
}

const fileTaxReport = (row: any) => {
  ElMessage.success(`${row.month}税务申报成功`)
  row.status = '已申报'
}

// 图表初始化方法
const initIncomeChart = () => {
  if (incomeChartRef.value) {
    const chart = echarts.init(incomeChartRef.value)
    
    const option = {
      title: {
        text: '收入趋势'
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [1000000, 1050000, 1100000, 1150000, 1184500, 1256800],
        type: 'line',
        smooth: true
      }]
    }
    
    chart.setOption(option)
  }
}

const initCostChart = () => {
  if (costChartRef.value) {
    const chart = echarts.init(costChartRef.value)
    
    const option = {
      title: {
        text: '成本结构'
      },
      tooltip: {
        trigger: 'item'
      },
      series: [{
        type: 'pie',
        data: [
          { value: 300000, name: '人力成本' },
          { value: 200000, name: '技术成本' },
          { value: 150000, name: '运营成本' },
          { value: 100000, name: '市场成本' },
          { value: 106200, name: '其他成本' }
        ]
      }]
    }
    
    chart.setOption(option)
  }
}

const initProfitChart = () => {
  if (profitChartRef.value) {
    const chart = echarts.init(profitChartRef.value)
    
    const option = {
      title: {
        text: '利润趋势'
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [300000, 320000, 340000, 360000, 383300, 400600],
        type: 'bar'
      }]
    }
    
    chart.setOption(option)
  }
}

// 工具方法
const getTaxStatusType = (status: string) => {
  switch (status) {
    case '已申报': return 'success'
    case '待申报': return 'warning'
    case '逾期': return 'danger'
    default: return 'info'
  }
}

// 组件挂载时初始化图表
onMounted(() => {
  loadIncomeReport()
  loadCostAnalysis()
  loadProfitAnalysis()
})
</script>

<style scoped>
.finance-report {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.content {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.stat-card {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}
</style>